<template>
    <div
        class="all">
        <div class="title">{{ $t('wp-wei-xiu-ji-lu') }}</div>
        <wp-null-data-area
            class="no-data"
            :null-data-msg="$st('wp_No_data')"
            v-if="!recordList || recordList.length === 0"
            null-text-msg-color="rgba(0,0,0,0.6)"
        />
        <van-list
            v-else
            @load="onLoad"
            v-model:loading="loading"
            :finished="finished"
            :finished-text="$st('wp_No_more')"
            :immediate-check="false">
            <van-cell-group>
                <van-cell
                    v-for="item in recordList"
                    @click="gotoRepairDetail(item)"
                    :key="item.repairid">
                    <div
                        class="van-cell-box">
                        <div
                            class="cell-left">
                            <div
                                class="record-no">{{ item.repairid }}<van-icon name="arrow"/></div>
                            <div
                                class="record-desc">{{ item.content }}</div>
                        </div>
                        <div
                            class="cell-right">
                            <div
                                class="record-status">
                                <div
                                    class="statusstyle"
                                    :style="{ backgroundColor:item.statusStyle }"></div>
                                <span>{{ item.status }}</span>
                            </div>
                            <div
                                class="record-time">{{ item.createtime }}</div>
                        </div>
                    </div>
                </van-cell>
            </van-cell-group>
        </van-list>
        <div
            class="footer"
            :offset-bottom="0"
            position="bottom">
            <van-button
                v-if="customerId"
                class="button mr10"
                @click="viewCustomerProfile">
                {{ $t('wp-cha-kan-ke-hu-dang-an') }}
            </van-button>
            <van-button
                class="button"
                @click="newRepair">
                {{ $t('wp-xin-jian-bao-xiu') }}
            </van-button>
        </div>
    </div>
    <customer-profile-dialog
        :dialogShow="dialogShow"
        :customerInfo="customerInfo"
        @close="dialogShow = false"></customer-profile-dialog>
</template>

<script>
import { onActivated, reactive, toRefs } from 'vue';
import { deviceviewSetup } from '@/setup/deviceview/deviceviewSetup.js';
import { getRepairStatusData } from '@/setup/repair/RepairStautsFormat';
import { useRouter } from 'vue-router';
import CustomerProfileDialog from '@/components/deviceview/dialog/customerProfileDialog.vue';
import moment from 'moment';

export default {
    components: {
        CustomerProfileDialog
    },
    props: {
        productId: String,
        customerId: String,
        manufacturecode: String
    },
    setup (props, ctx) {
        const { repairstatusformat } = getRepairStatusData();
        const { getRepairRecord, getCustomerRecord } = deviceviewSetup();
        const router = useRouter();

        const state = reactive({
            filterdata: {
                devicecontectrepairflag: true,
                manufacturecode: props.manufacturecode,
                status: 'all',
                n: 10,
                p: 1
            },
            recordList: [],
            allnum: 0,
            finished: false,
            loading: false,
            dialogShow: false,
            customerInfo: null
        });

        // 滚动加载下一页数据
        const onLoad = () => {
            state.filterdata.p++;
            getData();
        };

        // 获取数据
        const getData = () => {
            if (!props.manufacturecode) {
                return;
            }
            getRepairRecord(state.filterdata).then((data) => {
                state.loading = false;
                state.allnum = data.allnum;
                console.log(state.filterdata.p * state.filterdata.n);
                if (state.filterdata.p * state.filterdata.n >= state.allnum) {
                    state.finished = true;
                }
                const arr = data.value.map((item) => {
                    if (item.status === '4') {
                        item.statusStyle = 'rgba(82, 196, 26, 1)';
                    } else if (item.status === '3') {
                        item.statusStyle = 'rgba(255, 195, 0, 1)';
                    } else if (item.status === '2') {
                        item.statusStyle = 'rgba(24, 144, 255, 1)';
                    } else {
                        item.statusStyle = 'rgba(245, 34, 45, 1)';
                    }
                    item.status = repairstatusformat(item.status);
                    item.createtime = timeformat(item.createtime);
                    return item;
                });
                state.recordList = state.recordList.concat(arr);
            });
        };

        // 新建报修
        const newRepair = () => {
            router.push({
                path: 'createrepairorder'
            });
        };

        // 查看客户档案
        const viewCustomerProfile = () => {
            getCustomerRecord({
                customer_id: props.customerId
            }).then((data) => {
                state.customerInfo = data.value;
                state.dialogShow = true;
            });
        };

        // 时间处理
        const timeformat = (time) => {
            return moment(time).format(
                'YYYY-MM-DD HH:mm'
            );
        };

        // 跳转至报修详情
        const gotoRepairDetail = (item) => {
            router.push({
                name: 'maitenanceorderdetail',
                params: { repairId: item.repairid }
            });
        };

        onActivated(() => {
            state.recordList = [];
            state.filterdata.p = 1;
            state.finished = false;
            state.loading = false;
            getData();
        });

        return {
            ...toRefs(state),
            getData,
            onLoad,
            newRepair,
            viewCustomerProfile,
            timeformat,
            gotoRepairDetail
        };
    }
};
</script>

<style scoped lang="scss">
.all {
    background: #f0f0f0;
    overflow: scroll;
    height: calc(100vh - 97px);
}
.title {
    color: #000;
    font-weight: 600;
    font-size: 15px;
    padding: 23px 0 13px 15px;
}

.van-cell-box {
    display: flex;
    font-size: 14px;
    color: #000;
    .cell-left {
        flex: 1;
        width: 0;
        .record-no {
        }
        .record-desc {
            color: rgba(0,0,0,0.4);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

    }
    .cell-right {
        width: 121px;
        text-align: right;
        .record-status {
            .statusstyle{
                display: inline-block;
                width: 8px;
                height: 8px;
                border-radius: 50%;
                margin-right: 8px;
            }
        }
        .record-time {
            font-size: 13px;
            color: rgba(0,0,0,0.4);
        }

    }
}

.footer {
    position: fixed;
    bottom: 0;
    height: 53px;
    width: calc(100% - 30px);
    background-color: #fff;
    display:flex;
    align-items: center;
    padding-left: 15px;
    padding-right: 15px;
}

.button {
    margin: 0px;
    background: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 21px;
    font-size: 18px;
    text-align: center;
    color: #000;
    flex: 1;
}

.mr10 {
    margin-right: 10px;
}

.no-data {
    font-size: 15px;
}
</style>
